import React from 'react'
import { connect } from 'react-redux'
import { Menu, Header, Icon } from 'semantic-ui-react'
import Styled from 'styled-components'
import PropTypes from 'prop-types'
import { Switch, Redirect, withRouter } from 'react-router'
import { push } from 'react-router-redux'
import { PrivateRoute } from 'components/route'
import { dataset as datasetDuck } from 'ducks'
import Overview from './overview'
import Files from './files'
import Tasks from './tasks'
import Members from './members'
import Config from './config'
import Statistical from './statistical'

const StyledContent = Styled.div`
  padding-top: 150px;
  width:100%;
`

const StyledContentDiv = Styled.div`
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
  margin-top: -150px
`

const StyledContentDivScroll = Styled.div`
  padding-top: 30px;
  overflow: scroll; 
  height: 100%;
  padding-left: 30px;
  padding-right: 30px;
`

const StyledHeader = Styled(Header)`
  margin-bottom: 30px!important;
`
const DataSetContent = ({
  activeTab, location, match, gotoTab,
}) => (
  <StyledContent>
    <StyledContentDiv>
      <StyledHeader as="h3">
        <Icon name="tasks" />
        <Header.Content>项目1</Header.Content>
      </StyledHeader>
      <Menu pointing secondary fluid size="large">
        <Menu.Item
          name="项目概览"
          onClick={() => gotoTab(`${match.url}/overview`)}
          active={activeTab === 'overview'}
        />
        <Menu.Item
          name="文件管理"
          onClick={() => gotoTab(`${match.url}/files`)}
          active={activeTab === 'files'}
        />
        <Menu.Item
          name="成员管理"
          onClick={() => gotoTab(`${match.url}/members`)}
          active={activeTab === 'members'}
        />
        <Menu.Item
          name="任务"
          onClick={() => gotoTab(`${match.url}/tasks`)}
          active={activeTab === 'tasks'}
        />
        {
          /*
           <Menu.Item
          name="统计数据"
          onClick={() => gotoTab(`${match.url}/statistical`)}
          active={activeTab === 'statistical'}
        />
          */
        }
        <Menu.Item
          name="项目设置"
          onClick={() => gotoTab(`${match.url}/config`)}
          active={activeTab === 'config'}
        />
      </Menu>
    </StyledContentDiv>
    <StyledContentDivScroll>
      <Switch location={location}>
        <PrivateRoute path={`${match.url}/overview`} component={Overview} exact />
        <PrivateRoute path={`${match.url}/files`} component={Files} exact />
        <PrivateRoute path={`${match.url}/tasks`} component={Tasks} />
        <PrivateRoute path={`${match.url}/members`} component={Members} exact />
        <PrivateRoute path={`${match.url}/config`} component={Config} />
        <PrivateRoute path={`${match.url}/statistical`} component={Statistical} exact />
        <Redirect from={`${match.url}`} to={`${match.url}/overview`} />
      </Switch>
    </StyledContentDivScroll>
  </StyledContent>
)

DataSetContent.propTypes = {
  activeTab: PropTypes.object.isRequired,
  location: PropTypes.object.isRequired,
  match: PropTypes.object.isRequired,
  gotoTab: PropTypes.func.isRequired,
}

const mapStateToProps = state => ({
  activeTab: datasetDuck.selectors.activeTab(state),
})

const mapDispatchToProps = {
  gotoTab: path => push(path),
}

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps,
  )(DataSetContent),
)
